<template>
  <div class="contents">
    <div style="display: flex; justify-content: flex-end;">
      <el-button type="primary" @click="addOrderTag">新增</el-button>
    </div>
    <el-table :data="tagData" style="width: 100%; margin-top: 8px;">
      <el-table-column align="center" label="编号" type="index" width="380" />
      <el-table-column
        align="center"
        label="标签名称"
        prop="name"
        width="380"
      />
      <el-table-column align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="titleModal" :visible.sync="dialogTag" width="30%" :close-on-click-modal="false">
      <el-row align="middle" type="flex">
        <el-col :span="6">
          <span>标签名称</span>
        </el-col>
        <el-col :span="18">
          <el-input v-model="tagname" placeholder="请输入标签名称" />
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTag = false">关闭</el-button>
        <el-button type="primary" @click="tagnameOk">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getUnitQuery,
    getUnitEdit,
    getUnitAdd,
    getUnitDel,
  } from '@/api/profile'
  export default {
    data() {
      return {
        tagData: [],
        dialogTag: false,
        tagname: '',
        id: '',
        titleModal: '新增标签',
        modalEdit: false,
      }
    },
    created() {
      this.orderInit()
    },
    methods: {
      async orderInit() {
        const res = await getUnitQuery({
          code: 'order_name',
        })
        this.tagData = res.data
      },
      addOrderTag() {
        this.tagname = ''
        this.dialogTag = true
        this.titleModal = '新增标签'
        this.modalEdit = false
      },
      async tagnameOk() {
        if (this.tagname) {
          if (!this.modalEdit) {
            //新增
            const res = await getUnitAdd({
              name: this.tagname,
              dict_code: 'order_name',
            })
            if (res.data) {
              this.$message.success('添加成功')
              this.dialogTag = false
              await this.orderInit()
            }
          } else {
            //编辑
            const res = await getUnitEdit({
              name: this.tagname,
              id: this.id,
            })
            if (res.data) {
              this.$message.success('修改成功')
              this.dialogTag = false
              await this.orderInit()
            }
          }
        } else {
          this.$message.error('请输入标签名称')
        }
      },
      handleEdit(item) {
        this.titleModal = '编辑标签'
        this.dialogTag = true
        this.tagname = item.name
        this.id = item.id
        this.modalEdit = true
      },
      //删除
      handleDelete(item) {
        this.$confirm('确定要删除吗?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            const res = await getUnitDel({
              id: item.id,
            })
            if (res.data) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              await this.orderInit()
            }
          })
          .catch(() => {})
      },
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 10px 20px;
  }
</style>
